@import '../../assets/styles/common/variable.scss';

.container {
  background: url('../../assets/images/wallpaper/hjw-001.jpg') no-repeat center center;
  background-size: cover;
  filter: brightness(0.9);
  overflow: hidden;
  &.hasLeftMenu {
    padding-left: px2(300);
    z-index: 30 !important;
    .menu-box {
      left: 0;
      top: 0;
      height: 100%;
      width: px2(300);
      padding: px2(60) px2(20);
      transform: translate(0, 0);
      border-radius: 0;
      .menu-title {
        font-size: px2(30);
      }
    }
  }
  .menu-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: px2(900);
    height: px2(600);
    padding: px2(60);
    background-color: rgba(0,0,0, 0.4);
    border-radius: px2(10);
    z-index: 10;
    &.addTransition {
      transition: all ease-in-out .5s;
    }
    .menu-title {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: px2(60);
      line-height: px2(60);
      font-size: px2(40);
      text-align: center;
    }
    .menu-content {
      .item {
        position: relative;
        font-size: px2(20);
        line-height: px2(40);
        padding-left: px2(20);
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: px2(15);
          width: px2(10);
          height: px2(10);
          background-color: $red;
          border-radius: 50%;
        }
        &.active {
          color: $blue;
        }
      }
    }
  }
  .main-container {
    display: none;
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: rgba(207,207,207,0.8);
    .btn-close {
      position: absolute;
      right: px2(20);
      top: px2(20);
      width: px2(30);
      height: px2(30);
      border-radius: 50%;
      background: url("../../assets/images/common/icon_close.png") no-repeat #ddd;
      background-size: 100% auto;
      z-index: 10;
    }
    .main-content {
    }
  }
}
